<template>
  <v-chart :option="option"></v-chart>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 引入水球图插件, 在echarts中可以使用type=liquidFill引用
import 'echarts-liquidfill';

import { getReportData } from '@/api/index.js';

const option = ref({});

const renderChart = data => {
  option.value = {
    series: {
      type: 'liquidFill',
      data: [data],
      color: ['red'],
      /* 
        水球的半径,相对于容器宽度的百分比,
        在 ECharts 中，如果没有显式设置 v-chart 组件的容器大小，容器大小默认为父容器的尺寸 
      */
      radius: '80%',
      //轮廓
      outline: {
        // borderWidth: 轮廓的距离(padding)
        borderDistance: 2,
        itemStyle: {
          //轮廓的宽度(border)
          borderWidth: 2,
        },
      },
      amplitude: '4%', //波浪的高度(振幅)
    },
  };
};

onMounted(async () => {
  const res = await getReportData();

  const data = (res.salesGrowLastDay / 100).toFixed(2);
  renderChart(data);
});
</script>

<style scoped></style>
